<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root"></div>
    <!-- <label for=""></label> -->
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script>
      //   需求: <div class="one">
      //            <p>
      //              <span>test</span>
      //            </p>
      //         </div>
      const span = React.createElement('span', null, 'test')
      const p = React.createElement('p', null, span)
      const div = React.createElement(
        'div',
        // 注意: 某些属性,和js中关键字一样.所以要换一个新的名字.但是不用去背,因为react会提示
        { className: 'one', htmlFor: '123' },
        p
      )

      ReactDOM.render(div, document.getElementById('root'))
    </script>
  </body>
</html>
